import * as api from '@/services/vpnServer';
import { PageContainer } from '@ant-design/pro-components';
import { ProFormInstance } from '@ant-design/pro-form';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Popconfirm, Space, Tag, Tooltip } from 'antd';
import React, { useRef, useState } from 'react';
import { useModel } from 'umi';
import * as c from '@/services/consts';
import Form from './Form';
import FormIpRegion from './IpRegionForm';
import FormStat from './StatForm';
import * as apiGroup from '@/services/vpnGroup';

const OrderList: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

  const { hasRight } = useModel('useAuthModel');

  // const [listType, setListType] = useState<string>('1');

  const [formVisible, setFormVisible] = useState<boolean>(false);
  const [formIpRegionVisible, setFormIpRegionVisible] = useState<boolean>(false);
  const [formStatVisible, setFormStatVisible] = useState<boolean>(false);


  const {
    getProductMenuItems,
    getSupplier,
    supplierOptions,
    getGroupAreaFilterPolicyText,
    getVpnGroupExTrees,
  } = useModel('useGlobalModel', (model) => ({
    getProductMenuItems: model.getProductMenuItems,
    getSupplier: model.getSupplier,
    supplierOptions: model.supplierOptions,
    getGroupAreaFilterPolicyText: model.getGroupAreaFilterPolicyText,
    getVpnGroupExTrees: model.getVpnGroupExTrees,
  }));

  let columns: ProColumns<API.VpnServerBlockedIp>[] = [
    {
      title: 'IP',
      dataIndex: 'ip',
      width: 200,
      sorter: true,
    },
    {
      title: '类型',
      dataIndex: 'serverType',
      width: 120,
      search: false,
      sorter: true,
      render: (_, record) => {
        return c.getServerType(record.serverType)?.label;
      },
    },
    {
      title: '提供商',
      dataIndex: 'supplier',
      width: 150,
      search: false,
      sorter: true,
    },
    {
      title: '分组',
      dataIndex: 'groups',
      search: false,
      render: (_, record) => {
        if (!record.groups) {
          return <></>;
        }
        return record.groups.map((item) => (
          <Space
            style={{
              marginBottom: record.groups && record.groups.length > 1 ? 10 : 0,
            }}
          >
              <Tag
                key={`group_${item.id}`}
                color={
                  item.type == c.VpnGroupType.Ghost.value ? 'green' : 'blue'
                }
              >
                {apiGroup.getGroupBaseTagTitle(item)}
              </Tag>
          </Space>
        ));
      },
      filters: [
        { text: c.MemberLevel.Trial.label, value: c.MemberLevel.Trial.value },
        { text: c.MemberLevel.Free.label, value: c.MemberLevel.Free.value },
        { text: c.MemberLevel.VIP.label, value: c.MemberLevel.VIP.value },
        { text: c.MemberLevel.Internal.label, value: c.MemberLevel.Internal.value,},
      ],
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      align: 'center',
      width: 150,
      valueType:'date',
      sorter: true,
    },
    {
      title: '用户等级',
      dataIndex: 'memberLevel',
      hideInTable: true,
      valueType: 'select',
      fieldProps: {
        // mode: 'multiple',
        allowClear: true,
        options: c.MemberLevelOptions,
      },
    },
    {
      title: '服务器分组',
      dataIndex: 'groupId',
      hideInTable: true,
      valueType: 'treeSelect',
      fieldProps: {
        // mode: 'multiple',
        mode:'single',
        allowClear: true,
        showSearch: true,
        lineHeight: 900,
        treeNodeFilterProp:"title",
        treeData:getVpnGroupExTrees(undefined),
      },
    },
    {
      title: '创建人',
      align: 'center',
      width: 150,
      dataIndex: 'createUser',
      sorter: false,
      search: false,
    },
  ];


  return (
    <PageContainer>
      <ProTable
        rowKey="id"
        actionRef={actionRef}
        formRef={formRef}
        search={{
          defaultCollapsed: false,
        }}
        options={{
          fullScreen: false,
          reload: true,
          setting: false,
          density: false,
        }}
        // toolbar={{
        //   menu: {
        //     type: 'tab',
        //     activeKey: listType,
        //     items: [{label:<b>被墙IP列表</b>, key:'1'},{label:<b>被墙IP图表</b>, key:'2'}],
        //     onChange: (tabKey) => {
        //       //console.log(tabKey as string);
        //       setListType(tabKey as string);
        //     },
        //   },
        // }}
        columns={columns}
        toolBarRender={() => {
          var toolbarDoms: any[] = [];

          if (hasRight('vpnserver_blockediplist')) {
            toolbarDoms.push([
              <Button
                type="primary"
                onClick={() => {
                  setFormStatVisible(true);
                }}
              >
                统计图
              </Button>,
            ]);
          }

          if (hasRight('vpnserver_blockediplist')) {
            toolbarDoms.push([
              <Button
                type="primary"
                key="vpnserver_blockediplist"
                onClick={() => {
                  setFormVisible(true);
                }}
              >
                检查IP列表
              </Button>,
            ]);
          }

          toolbarDoms.push([
            <Button
              type="primary"
              key="vpnserver_ipareas"
              onClick={() => {
                setFormIpRegionVisible(true);
              }}
            >
              获取IP地理信息
            </Button>,
          ]);

          return toolbarDoms;
        }}
        pagination={{
          defaultPageSize: 15,
          pageSizeOptions: ['15', '30', '60', '100'],
          hideOnSinglePage: true,
          // current: pageCurrent,
          // total: totalCount,
        }}
        request={api.blockedIpList}
      />
      <Form
        visible={formVisible}
        onCancel={() => {
          setFormVisible(false);
        }}
      />
      <FormIpRegion
        visible={formIpRegionVisible}
        onCancel={() => {
          setFormIpRegionVisible(false);
        }}
      />
      <FormStat
        visible={formStatVisible}
        onCancel={() => {
          setFormStatVisible(false);
        }}
      />
    </PageContainer>
  );
};

export default OrderList;
